<template>
	<view class="">
		<uni-section title="基本用法" type="line">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
				@input="input" @cancel="cancel" @clear="clear">
			</uni-search-bar>

		</uni-section>
		<view class="history-c">
			<view class="history-body">
				<view class="hb-item" v-for="(item, key) in keys" :key="key" @click="toNav(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: '',
				keys: ['零食', '平衡车', '行李箱', '小白鞋', '毛绒玩具', '连衣裙', '充电宝'],
			}
		},
		onLoad: function(option) {
			//获得上一个页面传过来的id
			var pageid = option.id;
			console.log(pageid);
		},

		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log(res)
			},
			clear(res) {
				uni.showToast({
					title: 'clear事件，清除值为：' + res.value,
					icon: 'none'
				})
			},
			blur(res) {
				uni.showToast({
					title: 'blur事件，输入值为：' + res.value,
					icon: 'none'
				})
			},
			focus(e) {
				uni.showToast({
					title: 'focus事件，输出值为：' + e.value,
					icon: 'none'
				})
			},
			cancel(res) {
				uni.showToast({
					title: '点击取消，输入值为：' + res.value,
					icon: 'none'
				})
			}
		},
		onBackPress() {
			plus.key.hideSoftKeybord();
		}
	}
</script>

<style lang="scss" scoped>
	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.history-c {
		background-color: #fff;
		padding: 20rpx 26rpx;
	}

	.history-title {
		overflow: hidden;
	}

	.ht-left {
		float: left;
		font-size: 28rpx;
		color: #333;
	}

	.ht-right {
		float: right;
		color: #999;
		font-size: 26rpx;
	}

	.history-body {
		overflow: hidden;
		margin-top: 20rpx;
		min-height: 200rpx;
	}

	.hb-item {
		display: inline-block;
		float: left;
		background-color: #fff;
		color: #888;
		margin-right: 20rpx;
		margin-bottom: 14rpx;
		font-size: 26rpx;
		padding: 10rpx 20rpx;
	}
</style>